<template>
  <div class="home_box">
    <el-container>
      <el-header>
        <!-- <div class="header_box">
          <div>用户名：{{ counter.userName }}</div>
          <div>前端项目：v3+vite；接口：json-sever;UI库：element+echart；</div>
          <div>
            <el-button type="info" plain @click="clickQuit">退出</el-button>
          </div>
        </div> -->
        <!-- @headerPorps="headerPorps" -->
        <Header :headerList="headerList" @headerPorps="headerPorps"></Header>
      </el-header>

      <el-container>
        <el-aside width="widthData">
          <LayOut></LayOut>
        </el-aside>
        <el-container>
          <el-main style="background: #fff">
            <router-view></router-view>
          </el-main>
          <el-footer> 本项目只做技术学习，如有雷同，纯属巧合。 </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
  
  <script setup>
import LayOut from "@/components/LayOut.vue";

import { getCurrentInstance, onBeforeMount, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import Header from "@/components/Header.vue";

import { useCounterStore } from "@/store/counter"; //状态管理
const $router = useRouter(); // 获取全部路由
const $route = useRoute(); // route是当前路由对象
const headerList = reactive(useCounterStore()); //状态管理
const routerList = reactive({
  routerList: [],
});

const widthData = reactive({ widthData: "180px" });
const headerPorps = (params) => {
  console.log(params, "params");
  localStorage.removeItem("TOKEN");
  $router.push("/Login");
};

onMounted(() => {
  console.log($router.options.routes[1], "9877"); //获取路由信息

  console.log($route.path, $route.params); // quey传递过来的参数都是字符串类型
});

const { proxy } = getCurrentInstance();
const emits = defineEmits([]);
const props = defineProps({});
const state = reactive({});
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state });
</script> 
  <style lang="scss" scoped>
// element 布局容器占据100%
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home_box {
  height: 100%;
  width: 100%;
}
</style>